<template>
  <view class="signUp-view">
    <view class="main-view">
      <view class="main-view-box">
        <view>
          <view class="common-view-row">
            <view class="form-item">
              <p class="title-0">小孩</p>
              <dropdown-tree-selector
                :treeData="statusList"
                :multiple="false"
                :selectedIds="searchForm.stageStatus"
                placeholder="请选择小孩"
                @select="handleSearch($event, 'stageStatus')"
              ></dropdown-tree-selector>
            </view>

            <view class="form-item">
              <p class="title-0">课程</p>
              <dropdown-tree-selector
                :treeData="statusList"
                :multiple="false"
                :selectedIds="searchForm.stageStatus"
                placeholder="请选择课程"
                @select="handleSearch($event, 'stageStatus')"
              ></dropdown-tree-selector>
            </view>
          </view>
          <view class="common-view-row">
            <view class="form-item">
              <p class="title-0">阶梯</p>
              <dropdown-tree-selector
                :treeData="summaryList"
                :multiple="false"
                :selectedIds="searchForm.stageSummaryClass"
                placeholder="请选择小结状态"
                @select="handleSearch($event, 'stageSummaryClass')"
              ></dropdown-tree-selector>
            </view>

            <view class="form-item">
              <p class="title-0">阶段</p>
              <dropdown-tree-selector
                :treeData="hasClassList"
                :multiple="false"
                :selectedIds="searchForm.hasClass"
                placeholder="请选择是否上课"
                @select="handleSearch($event, 'hasClass')"
              ></dropdown-tree-selector>
            </view>
          </view>
        </view>
      </view>

      <view class="main-view-box">
        <view class="main-view-person">
          <text class="title">L1重点能力及目标</text>
          <view @click="addPerson()"
            ><uni-icons type="plusempty" size="24" color="#30B3AB"></uni-icons>
            新增能力</view
          >
        </view>
        <view class="main-view-person-list">
          <view
            v-for="(item, i) in personList"
            :key="i"
            class="main-view-person-list-box"
          >
            <uni-icons
              v-if="i > 0"
              type="clear"
              size="44"
              class="delete-icon"
              @click="delPerson(i)"
            ></uni-icons>
            <view class="select-box">
              <dropdown-tree-selector
                :treeData="statusList"
                :multiple="false"
                :selectedIds="searchForm.stageStatus"
                placeholder="听广度-仿说类"
                @select="handleSearch($event, 'stageStatus')"
              ></dropdown-tree-selector>
            </view>
            <view class="select-box">
              <view class="sub-title">训练项目(多选)</view>
              <dropdown-tree-selector
                :treeData="statusList"
                :multiple="false"
                :selectedIds="searchForm.stageStatus"
                placeholder="走平衡台/平衡木/站半球"
                @select="handleSearch($event, 'stageStatus')"
              ></dropdown-tree-selector>
            </view>
            <view class="select-box">
              <view class="sub-title">训练项目(多选)</view>
              <view class="input-box">
                <input
                  disabled
                  placeholder="单脚站30秒"
                  v-model="searchForm.time"
                />
                <!-- <text>%</text> -->
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="main-view-box">
        <view class="main-view-person">
          <text class="title">L1非重点能力目标</text>
          <view @click="addPerson()"
            ><uni-icons type="plusempty" size="24" color="#30B3AB"></uni-icons>
            新增能力</view
          >
        </view>
        <view class="main-view-person-list">
          <view
            v-for="(item, i) in personList"
            :key="i"
            class="main-view-person-list-box"
          >
            <uni-icons
              v-if="i > 0"
              type="clear"
              size="44"
              class="delete-icon"
              @click="delPerson(i)"
            ></uni-icons>
            <view class="select-box">
              <dropdown-tree-selector
                :treeData="statusList"
                :multiple="false"
                :selectedIds="searchForm.stageStatus"
                placeholder="听广度-仿说类"
                @select="handleSearch($event, 'stageStatus')"
              ></dropdown-tree-selector>
            </view>
            <view class="select-box">
              <view class="sub-title">训练项目(多选)</view>
              <dropdown-tree-selector
                :treeData="statusList"
                :multiple="false"
                :selectedIds="searchForm.stageStatus"
                placeholder="走平衡台/平衡木/站半球"
                @select="handleSearch($event, 'stageStatus')"
              ></dropdown-tree-selector>
            </view>
            <view class="select-box">
              <view class="sub-title">训练项目(多选)</view>
              <view class="input-box">
                <input
                  disabled
                  placeholder="单脚站30秒"
                  v-model="searchForm.time"
                />
                <!-- <text>%</text> -->
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- L1行为习惯目标 -->
      <view class="main-view-box">
        <view class="main-view-person">
          <text class="title">L1行为习惯目标</text>
          <view @click="addPerson()"
            ><uni-icons type="plusempty" size="24" color="#30B3AB"></uni-icons>
            新增能力</view
          >
        </view>
        <view>
          <view v-for="(item, i) in personList" :key="i" class="single-box">
            <uni-icons
              v-if="i > 0"
              type="clear"
              size="44"
              class="delete-icon"
              @click="delPerson(i)"
            ></uni-icons>
            <view class="select-box">
              <view class="input-box">
                <input
                  placeholder="请输入行为习惯目标"
                  v-model="searchForm.time"
                />
                <!-- <text>%</text> -->
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- L1家庭教育目标 -->
      <view class="main-view-box">
        <view class="main-view-person">
          <text class="title">L1家庭教育目标</text>
          <view @click="addPerson()"
            ><uni-icons type="plusempty" size="24" color="#30B3AB"></uni-icons>
            新增能力</view
          >
        </view>
        <view>
          <view v-for="(item, i) in personList" :key="i" class="single-box">
            <uni-icons
              v-if="i > 0"
              type="clear"
              size="44"
              class="delete-icon"
              @click="delPerson(i)"
            ></uni-icons>
            <view class="select-box">
              <view class="input-box">
                <input
                  placeholder="让孩子自己整理学习用具(书桌和书包)包"
                  v-model="searchForm.time"
                />
                <!-- <text>%</text> -->
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="fixed-height"></view>

    <view class="footer-submit flex-center">
      <view class="submit-btn" @click="toPage('/pages/stage-plan/add')">
        提交保存</view
      >
    </view>
  </view>
</template>

<script>
import DropdownTreeSelector from "@/components/dropdown-tree-selector/dropdown-tree-selector.vue";
import { listChild } from "@/api/stagePlan/stagePlan.js";
export default {
  components: { DropdownTreeSelector },
  data() {
    return {
      searchForm: {
        childName: "", //小孩名字
        stageStatus: "", //阶段状态：0-进行中，1-已完成，2-需复测
        stageSummaryClass: "", //小结状态：0-全部，1-需要小结
        hasClass: "", //是否有上课：0-没有，1-有
      },
      statusList: [
        {
          id: 0,
          label: "进行中",
        },
        {
          id: 1,
          label: "待复测",
        },
        {
          id: 2,
          label: "已完成",
        },
      ],
      summaryList: [
        {
          id: 0,
          label: "全部",
        },
        {
          id: 1,
          label: "需要小结",
        },
      ],
      hasClassList: [
        {
          id: 0,
          label: "没有",
        },
        {
          id: 1,
          label: "有",
        },
      ],
      list: [],
      personList: [
        {
          personId: "",
          value: "",
        },
      ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    addPerson() {
      this.personList.push({
        personId: "",
        value: "",
      });
    },
    delPerson(index) {
      this.personList.splice(index, 1);
    },
    getList() {
      let data = this.searchForm;
      listChild(data).then((res) => {
        this.list = res.rows;
      });
    },
    handleSearch(val, field) {
      this.searchForm[field] = val;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  ::v-deep .uni-select {
    font-size: pxtovw(32);
    padding: pxtovw(10) pxtovw(30);
    height: pxtovw(96);
    border-radius: pxtovw(20);
    .uni-select__input-box {
      font-size: pxtovw(32);
      height: pxtovw(65);
      .uni-select__input-placeholder {
        font-size: pxtovw(30);
      }
    }
    .uni-icons {
      font-size: pxtovw(30) !important;
    }
  }
  ::v-deep .uni-page-wrapper {
    height: auto;
  }
}
.signUp-view {
  .main-view {
    padding: pxtovw(30) pxtovw(34);
    .main-view-box {
      background-color: #fff;
      padding: pxtovw(40) pxtovw(34);
      border-radius: pxtovw(20);
      margin-bottom: pxtovw(30);
      .main-view-select {
        text {
          color: #1e1b3a;
          font-size: pxtovw(30);
          font-weight: 500;
        }
        view {
          margin-top: pxtovw(20);
          width: pxtovw(600);
          height: pxtovw(96);
          border-radius: pxtovw(20);
        }
      }
      .main-view-msg {
        display: flex;
        background-color: #ebf8f7;
        padding: pxtovw(30);
        border-radius: pxtovw(20);
        margin-top: pxtovw(30);
        view {
          font-size: pxtovw(30);
          margin-right: pxtovw(90);
          text {
            font-size: pxtovw(30);
            color: #30b3ab;
          }
        }
      }
      .main-view-input {
        display: flex;
        margin-top: pxtovw(40);
        view {
          text {
            color: #1e1b3a;
            font-weight: 500;
            font-size: pxtovw(30);
          }
        }
        .main-view-input-one {
          margin-right: pxtovw(32);
          view {
            display: flex;
            width: pxtovw(600);
            height: pxtovw(96);
            border: 1px solid #d9d9d9;
            border-radius: pxtovw(20);
            padding-left: pxtovw(30);
            align-items: center;
            margin-top: pxtovw(20);
            input {
              height: pxtovw(58);
              width: 80%;
              font-size: pxtovw(30);
              border-right: 2px solid #d9d9d9;
              margin-right: pxtovw(30);
            }
            text {
              color: #666666;
            }
          }
        }
        .main-view-input-two {
          width: 100%;
          view {
            display: flex;
            width: 97%;
            height: pxtovw(96);
            border: 1px solid #d9d9d9;
            border-radius: pxtovw(20);
            padding-left: pxtovw(30);
            align-items: center;
            margin-top: pxtovw(20);
            input {
              height: pxtovw(58);
              width: 80%;
              font-size: pxtovw(30);
              margin-right: pxtovw(30);
            }
          }
        }
      }
    }
    .main-view-person {
      display: flex;
      align-items: center;
      text {
        font-weight: bold;
        font-size: pxtovw(30);
        color: #1e1b3a;
      }
      view {
        width: 137px;
        height: 66px;
        border: 1px solid #30b3ab;
        font-size: pxtovw(24);
        color: #30b3ab;
        background-color: #ebf8f7;
        border-radius: 8px;
        margin-left: pxtovw(20);
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .main-view-person-list {
      margin-top: pxtovw(28);
      display: flex;
      flex-wrap: wrap;

      .main-view-person-list-box {
        margin-bottom: pxtovw(30);

        background: #ffffff;
        border-radius: 20px 20px 20px 20px;
        border: 1px solid #30b3ab;
        border: 1px dashed #30b3ab;
        border-radius: pxtovw(20);
        padding: pxtovw(30);
        margin-right: pxtovw(16);
        position: relative;
        width: 32%;
        .delete-icon {
          position: absolute;
          right: -13px;
          top: -17px;
        }
        .sub-title {
          font-weight: 500;
          font-size: pxtovw(28);
          color: #666666;
          padding: pxtovw(0) pxtovw(0) pxtovw(20) pxtovw(0);
        }
        .select-box {
          margin-top: pxtovw(20);
        }
        .input-box {
          border: 1px solid #d9d9d9;
          border-radius: pxtovw(20);
          display: flex;
          height: pxtovw(98);
          align-items: center;
          padding-left: pxtovw(30);

          input {
            height: pxtovw(58);
            width: 100%;
            font-size: pxtovw(30);
            margin-right: pxtovw(30);
            // border-right: 2px solid #d9d9d9;
          }
          text {
            font-size: pxtovw(30);
          }
        }
      }
    }
    .good-view {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 100%;
      margin-top: pxtovw(30);
      .good-view-box {
        width: 29%;
        border: 1px dashed #30b3ab;
        border-radius: pxtovw(20);
        display: flex;
        padding: pxtovw(30);
        position: relative;
        align-items: center;
        text {
          font-size: pxtovw(30);
          color: #1e1b3a;
        }
        .input-box {
          border: 1px solid #d9d9d9;
          border-radius: pxtovw(20);
          display: flex;
          height: pxtovw(98);
          align-items: center;
          padding-left: pxtovw(30);
          width: 55%;
          margin-left: pxtovw(30);
          input {
            height: pxtovw(58);
            font-size: pxtovw(30);
          }
        }
        .delete-icon {
          position: absolute;
          right: -pxtovw(16);
          top: -18px;
        }
      }
    }
    .notes-box {
      margin-top: pxtovw(40);
      text {
        color: #1e1b3a;
        font-size: pxtovw(30);
      }
      .notes-length {
        margin-left: pxtovw(24);
        text {
          color: #30b3ab !important;
        }
      }
    }
    .notes-view {
      margin-top: pxtovw(10);
      border: 1px solid #d9d9d9;
      border-radius: pxtovw(20);
      padding: pxtovw(30) pxtovw(24);
      .textarea {
        font-size: pxtovw(32);
      }
      uni-textarea {
        width: 100%;
      }
      .uni-textarea-placeholder {
        font-size: pxtovw(32);
        width: 100%;
      }
      .uni-textarea-textarea {
        font-size: pxtovw(32);
      }
      view {
        text-align: right;
        margin-right: pxtovw(10);
        .textarea {
          font-size: pxtovw(32);
          width: 100%;
        }
      }
    }
  }
  .downBtn-view {
    display: flex;
    justify-content: space-between;
    height: pxtovw(128);
    height: 100%;
    background-color: #fff;
    padding: 0px pxtovw(34);

    view {
      display: flex;
      align-items: center;
      height: pxtovw(128);
      font-size: pxtovw(36);
      color: #1e1b3a;
      &:last-child {
        width: 444px;
        height: 99px;
        background: #30b3ab;
        border-radius: pxtovw(60);
        color: #fff;
        justify-content: center;
        margin-top: pxtovw(14);
      }
    }
  }
}
.common-view {
  flex-direction: column;
}
.common-view-row {
  width: 100%;
  display: flex;
}
.common-view-title {
  display: flex;
  align-items: center;
}
.form-item {
  width: pxtovw(600);
  margin-bottom: pxtovw(40); /* 根据需要调整 */
  margin-right: pxtovw(32);
}
.single-box {
  position: relative;
  padding-top: pxtovw(30);
  .delete-icon {
    position: absolute;
    right: -13px;
    top: 0px;
  }
}
.input-box {
  border: 1px solid #d9d9d9;
  border-radius: pxtovw(20);
  display: flex;
  height: pxtovw(98);
  align-items: center;
  padding-left: pxtovw(30);

  input {
    height: pxtovw(58);
    width: 100%;
    font-size: pxtovw(30);
    margin-right: pxtovw(30);
    // border-right: 2px solid #d9d9d9;
  }
  text {
    font-size: pxtovw(30);
  }
}
</style>